<style media="screen">
  .business-follow-list-item {
    border-bottom: 1px solid #e5e5e5;
  }

  .business-follow-list-item:last-child {
    border-bottom: none;
  }

  .business-follow-list-wrap div:hover {
    background-color: #f9f9f9;
  }

  .business-dispatch-tabbar {
    overflow: hidden;
  }

  .business-dispatch-tabbar li {
    cursor: pointer;
    float: left;
    height: 34px;
    line-height: 34px;
    text-align: center;
    border: 1px solid #e5e5e5;
    border-radius: 4px;
    margin-right: 20px;
    padding: 0 10px;
  }

  .business-dispatch-tabbar li.active {
    background-color: #565E99;
    color: #fff;
  }

  .business-dispatch-circle {
    float: left;
    width: 8px;
    height: 8px;
    background-color: #565E99;
    border-radius: 8px;
    box-shadow: 0 0 8px rgba(127, 139, 229, 1);
    line-height: 34px;
    margin-right: 12px;
    margin-top: 12px;
  }

  .business-dispatch-title {
    float: left;
    line-height: 34px;
    margin-right: 20px;
  }

  .business-dispatch-person-container {
    float: left;
    margin-right: 20px;
  }

  .head-container {
    position: relative;
    padding: 10px 0 14px;
    border-bottom: 1px solid #E3E3E5;
  }

  .head-container .mes {
    overflow: hidden;
    margin-right: 10px;
    float: left;
  }

  .head-container .mes p {
    font-size: 12px;
    color: #CFCFCF;
    margin-bottom: 6px;
  }

  .head-container .mes input {
    width: 260px;
    height: 34px;
  }

  .head-container .flow {
    float: left;
    margin-right: 10px;
  }

  .head-container .flow p {
    font-size: 12px;
    color: #CFCFCF;
    margin-bottom: 6px;
  }

  .head-container .flow .flow-select {
    width: 140px;
    height: 34px;
  }

  .head-container .button-group {
    padding-top: 23px;
  }

  .auth-config-pop .auth-item::before {
    left: 20px;
    top: 14px;
  }
</style>

<section class="pl-24 pr-24" class="businessDispatch" id="businessDispatch" @click="hideRpersonList">
  <hl-page-header title="客户分派"></hl-page-header>

  <div class="head-container clearfix">
    <div class="clearfix">
      <div class="mes">
        <p>信息检索</p>
        <div class="global_search">
          <span class="icon-Gm-search"></span>
          <input autocomplete="off" type="text" class="global_ipt_text" placeholder="主题/目标客户/联系人/联系电话/创建人"
            v-model="keyWord" />
        </div>
      </div>
      <div class="flow">
        <p>客户状态</p>
				<hl-select :data="customerStatuList" v-model="selectedCustomerStatu" width="120" @on-change="selectCustomerStatu"></hl-select>
      </div>

      <div class="flow">
        <p>客户类型</p>
				<hl-select :data="customerType" v-model="selectedCustomerType" width="120" @on-change="selectCustomerType"></hl-select>
      </div>

      <div class="flow" v-show="isExtenseFlag">
        <p>所属行业</p>
				<hl-select :data="industryType" v-model="selectedIndustryType" width="120" @on-change="selectIndustryType"></hl-select>
      </div>

      <div class="flow">
        <p>对接人</p>
        <div class="pull-left line-height-34 relative">
          <input type="text" placeholder="全部" class="global_ipt_text" autocomplete="off" style="width:140px;"
            v-model="rpersonKeyword"  @input="getRpersonData"/>
          <ul class="append-temp absolute bg-fff border z-998 line-height-34"
            style="left:0; top:35px; max-height:200px; overflow-y:scroll; width: 100%; text-indent:0.8em;"
            v-if="rperson.list.length > 0">
            <li v-for="item in rperson.list" :key="item.userId" class="clearfix"
              @click="setRperson(item.userName, item.userId)">
              <span class="pull-left">{{item.userName}}</span>
              <span class="pull-right">{{item.userPhone}}</span>
            </li>
          </ul>
        </div>
      </div>

      <div class="button-group" v-show="!isExtenseFlag">
        <hl-button @on-click="search" size="mini">查询</hl-button>
        <hl-button @on-click="reset" size="mini">重置</hl-button>
      </div>
    </div>

    <div class="mt-10" v-show="isExtenseFlag">
      <div class="flow">
        <p>渠道分类</p>
				<hl-select :data="channelType" v-model="selectedChannelType" width="120" @on-change="selectChannelType"></hl-select>
      </div>
      <div class="flow">
        <p>渠道名称</p>
				<hl-select :data="channelName" v-model="selectedChannelName" width="120" @on-change="selectChannelName"></hl-select>
      </div>
      <div class="button-group">
        <hl-button @on-click="search" size="mini">查询</hl-button>
        <hl-button @on-click="reset" size="mini">重置</hl-button>
      </div>
    </div>

    <div class="global_open_sign" @click="openSearch">
      <span v-if="!isExtenseFlag">更多筛选项</span>
      <span v-if="isExtenseFlag">收起筛选项</span>
    </div>

  </div>

  <div class="global_screening_container">
    <hl-checkbox-button :data="listMenu" v-model="selectedListMenuCode" @on-click="selectMenuList" merge></hl-checkbox-button>
    <span class="global_refresh_icon icon-uniE94B" @click="resetTabbar" style="left:185px"></span>
  </div>

  <!--流式布局表格-->
  <section class="fixed-config-table-container global_table" style="border:1px solid #E5E5E5;margin: 0;"
    @mouseenter="showScroll" @mouseleave="hideScroll">
    <!-- 内容表格 -->
    <div class="fixed-config-table-wrap" :class="{'config-table-scroll':isScroll}"
      :style="{width:isShowSelector?'100%':''}">
      <div :style="tbTitleWidth">
        <div class="config-table-title-wrap dy-flex auth-config-pop">
          <!-- //完整 -->
          <div style="padding:0px;" class="config-table-title-item global_table_title" v-if="configType == 'WZ'"
            @click=" sortBySTTime(item)"
            :class="{'dy-fx-1':item.name === '序' || (item.value == 'iSselect' && isShowSelector) ,'dy-fx-2':item.name !== '序' && item.value != 'iSselect'}"
            v-for="(item,index) in headArr">
            <span v-if="item.value != 'iSselect'">{{ item.name }}</span>
            <span v-if="dateTimeUpdate.indexOf(item.value) > -1 && indexTime < 1"
              v-for="(time,indexTime) in dateTimeUpdate"
              :class="{'icon-Gm-sort-default': isActiveCode != item.value, 'icon-Gm-sort-ascending': isActiveCode == item.value && orders == 'ASC', 'icon-Gm-sort-descending': isActiveCode == item.value && orders == 'DESC'}">
              <span class="path1"></span><i class="path2"></i>
            </span>
            <span v-if="item.value == 'iSselect'" @click="isAllSelect(item)" class="auth-item"
              :class="{'js-q-active':selectedMulItem.sjIds.length == listObj.customerAssigns.length }"></span>
          </div>
          <!-- //简单 -->
          <div style="padding:0px;" class="config-table-title-item global_table_title"
            v-if="configType == 'JD' && item.baseFlag == 'Y'" @click=" sortBySTTime(item)"
            :class="{'dy-fx-1':item.name === '序'|| (item.value == 'iSselect' && isShowSelector) ,'dy-fx-2':item.name !== '序' && item.value != 'iSselect'}"
            v-for="(item,index) in headArr">
            <span v-if="item.value != 'iSselect'">{{ item.name }}</span>
            <span v-if="dateTimeUpdate.indexOf(item.value) > -1 && indexTime < 1"
              v-for="(time,indexTime) in dateTimeUpdate"
              :class="{'icon-Gm-sort-default': isActiveCode != item.value, 'icon-Gm-sort-ascending': isActiveCode == item.value && orders == 'ASC', 'icon-Gm-sort-descending': isActiveCode == item.value && orders == 'DESC'}">
              <span class="path1"></span><i class="path2"></i>
            </span>
            <span v-if="item.value == 'iSselect'" @click="isAllSelect(item)" class="auth-item"
              :class="{'js-q-active':selectedMulItem.sjIds.length == listObj.customerAssigns.length }"></span>
          </div>
          <!-- //配置 -->
          <div style="padding:0px;" class="config-table-title-item global_table_title"
            v-if="configType == 'PZ' && item.customShowFlag == 'Y'" @click=" sortBySTTime(item)"
            :class="{'dy-fx-1':item.name === '序'|| (item.value == 'iSselect' && isShowSelector) ,'dy-fx-2':item.name !== '序' && item.value != 'iSselect'}"
            v-for="(item,index) in headArr">
            <span
              v-if="item.value != 'iSselect'">{{ item.customDisplayName ? item.customDisplayName : item.name }}</span>
            <span v-if="dateTimeUpdate.indexOf(item.value) > -1 && indexTime < 1"
              v-for="(time,indexTime) in dateTimeUpdate"
              :class="{'icon-Gm-sort-default': isActiveCode != item.value, 'icon-Gm-sort-ascending': isActiveCode == item.value && orders == 'ASC', 'icon-Gm-sort-descending': isActiveCode == item.value && orders == 'DESC'}">
              <span class="path1"></span><i class="path2"></i>
            </span>
            <span v-if="item.value == 'iSselect'" @click="isAllSelect(item)" class="auth-item"
              :class="{'js-q-active':selectedMulItem.sjIds.length == listObj.customerAssigns.length }"></span>
          </div>
        </div>

        <div class="config-table-content-wrap auth-config-pop">
          <ul class="dy-flex global_table_item" v-for="(item,index) in listObj.customerAssigns">
            <!-- //完整 -->
            <li
              :class="{'dy-fx-1':item1.name === '序' || (item1.value == 'iSselect' && isShowSelector),'dy-fx-2':item1.name !== '序' && item1.value != 'iSselect'}"
              v-if="configType == 'WZ'" v-for="(item1,index1) in headArr">
              <span v-show="item1.value == 'iSselect' " class="auth-item"
                :class="selectedMulItem.sjIds.indexOf(item.id) == -1?'':'js-q-active'"
                @click="selectDispatchItem(item.id,index)"></span>
              <span v-show="item1.value != 'iSselect'">{{item[item1.value] | formatUndefined}} </span>
            </li>
            <!-- //简单 -->
            <li
              :class="{'dy-fx-1':item1.name === '序' || (item1.value == 'iSselect' && isShowSelector),'dy-fx-2':item1.name !== '序' && item1.value != 'iSselect'}"
              v-if="configType == 'JD' && item1.baseFlag == 'Y'" v-for="(item1,index1) in headArr">
              <span v-show="item1.value == 'iSselect' " class="auth-item"
                :class="selectedMulItem.sjIds.indexOf(item.id) == -1?'':'js-q-active'"
                @click="selectDispatchItem(item.id,index)"></span>
              <span v-show="item1.value != 'iSselect'">{{item[item1.value] | formatUndefined}} </span>
            </li>
            <!-- //配置 -->
            <li
              :class="{'dy-fx-1':item1.name === '序' || (item1.value == 'iSselect' && isShowSelector),'dy-fx-2':item1.name !== '序' && item1.value != 'iSselect'}"
              v-if="configType == 'PZ' && item1.customShowFlag == 'Y'" v-for="(item1,index1) in headArr">
              <span v-show="item1.value == 'iSselect' " class="auth-item"
                :class="selectedMulItem.sjIds.indexOf(item.id) == -1?'':'js-q-active'"
                @click="selectDispatchItem(item.id,index)"></span>
              <span v-show="item1.value != 'iSselect'">{{item[item1.value] | formatUndefined}} </span>
            </li>
          </ul>
        </div>
      </div>
    </div>

    <!-- 操作 -->
    <div class="config-table-operate-wrap" v-if="!isShowSelector">
      <div class="title" style="backgroundColor:#F0F2FF;height:40px;">
        <div class="name">操作</div>
        <div class="extension-wrap">
          <i class="icon-predict-more extension-icon"></i>
        </div>
        <ul class="table-type-wrap">
          <li @click="selectTableType('JD')" :class="{'active': configType == 'JD' }">简单表格</li>
          <li @click="selectTableType('WZ')" :class="{'active': configType == 'WZ' }">完整表格</li>
          <li @click="selectTableType('PZ')" :class="{'active': configType == 'PZ' }">自定义表格<span
              class="icon icon-Gm-edit" @click="showTableLayer"></span></li>
        </ul>
      </div>
      <ul class="button-group">
        <li v-for="(item,index) in listObj.customerAssigns" class="global_table_item">
          <a @click="goTodetail(item.id)">详情</a>
          <a @click="dispatchBusiness(item.id)"  v-if="quanxian.indexOf('c151')>-1">{{item.rpersonName?'重新分派':'分派'}}</a>
        </li>
      </ul>
    </div>

  </section>
  <!-- end -->

  <!-- 自定义列表项弹出层 -->
  <div class="pop box-o-shadow config-table-layer" v-show="isShowTableLayer">
    <div class="head-pop font-16"><span>自定义列</span>
      <button class="fw-close absolute close" type="button" @click="closeTableLayer">×</button>
    </div>
    <div class="content-pop">
      <div class="content text-center">
        <ul class="title-wrap">
          <li class="dy-fx-1 text-left">名称</li>
          <li class="dy-fx-2">自定义名称</li>
          <li class="dy-fx-1">状态</li>
        </ul>
        <div class="ctx-wrap" id="sortableTable">
          <ul :class="{ 'active': item.isActive == 'Y' }" v-for="(item,index) in sortTableTitle" v-if="item.value != 'iSselect'"
            @mouseenter="showhighLightTitleItem(item,index)" @mouseleave="removehighLightTitleItem(item,index)">
            <li class="sort-sign" :class="{ 'active':item.isActive == 'Y' }">排序</li>
            <li class="dy-fx-1 name">{{item.name}}</li>
            <li class="dy-fx-2">
              <input type="text" class="form-control" v-model="item.customDisplayName">
            </li>
            <li class="dy-fx-1 ">
              <span class="show-icon "
                :class="{'icon-Nav-contract-choice':item.customShowFlag == 'Y' , 'icon-uncheck':item.customShowFlag == 'N' }"
                @click="selectedTitleItem(index)">显示</span>
              <span class="hide-icon "
                :class="{'icon-Nav-contract-choice':item.customShowFlag == 'N' , 'icon-uncheck':item.customShowFlag == 'Y' }"
                @click="cancelSelectedTitleItem(index)">隐藏</span>
            </li>
          </ul>

        </div>
      </div>
    </div>
    <div class="fw-button">
      <button type="button" class="fw-submit yes" @click="confirmSubmitTable">确定</button>
      <button type="button" class="fw-submit no" @click="closeTableLayer">取消</button>
    </div>
  </div>
  <!--遮罩-->
  <div class="backdrop" v-if="isShowTableLayer"></div>
  <!-- end -->

  <div class="user-page ptb-10 border-b clearfix">
    <div class="pull-left user-page-num">
      <span class="font-14">共<i>{{totalCount}}</i>条记录</span>
      <span>每页<hl-select :data="pageCounts" v-model="limit" width="80" @on-change="selectPerNum"></hl-select>条</span>
    </div>
    <div class="pull-right">
      <hl-pagination v-model="currentPage" :total="totalPage" @change="searchData"></hl-pagination>
    </div>
  </div>
  <div class="ptb-10">
    <hl-button type="primary" @on-click="batchDispatch" v-if="quanxian.indexOf('c151') > -1">批量分派</hl-button>
  </div>

  <div class="ptb-10" v-if="isShowSelector">
    <div class="business-dispatch-circle"></div>
    <div class="business-dispatch-title">分派给</div>
    <div class="business-dispatch-person-container">
      <div class="select-ul" style="width:170px;">
        <span class="select-name br-4 box-i-shadow">请选择</span>
        <ul>
          <li v-for="item in positionList" @click="singleItemSelectProject(item)">{{item.positionName}}</li>
        </ul>
      </div>
      <div class="select-ul" style="width:170px;">
        <span class="select-name br-4 box-i-shadow" ref="DJR">请选择</span>
        <ul>
          <li v-for="item in personList" @click="singleItemSelectPerson(item)">{{item.userName}}</li>
        </ul>
      </div>
    </div>
    <hl-button type="primary" @on-click="confirmDispatchSingleItem">确定</hl-button>
  </div>

  <!-- 选择对接人 -->
  <div class="pop box-o-shadow contract-confirm-layer" v-if="isShowPersonLayer">
    <div class="head-pop font-16"><span>选择对接人</span>
      <button class="fw-close absolute close" type="button" @click="closePersonLayer">×</button>
    </div>
    <div class="content-pop" style="padding:20px 90px 40px;height:200px;overflow: visible">
      <div class="row" style="marginBottom:20px;">
        <div class="line-height-34 inline-block" style="marginLeft:50px;">所属组织：</div>
        <div class="inline-block" style="width:300px;">
          <div class="select-ul">
            <span class="select-name br-4 box-i-shadow text-left org-name">请选择</span>
            <ul>
              <li v-for="item in positionList" @click="singleItemSelectProject(item)">{{item.positionName}}</li>
            </ul>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="line-height-34 inline-block" style="marginLeft:50px;">对接人：</div>
        <div class="inline-block" style="width:300px;marginLeft:15px;">
          <div class="select-ul">
            <span class="select-name br-4 box-i-shadow text-left person-name" ref="DJR">请选择</span>
            <ul>
              <li v-for="item in personList" @click="singleItemSelectPerson(item)">{{item.userName}}</li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    <div class="ptb-10 text-center">
      <hl-button type="primary" @on-click="confirmDispatchSingleItem">确定提交</hl-button>
      <hl-button type="outline" @on-click="closePersonLayer">返回修改</hl-button>
    </div>
  </div>
  <div class="backdrop" v-if="isShowPersonLayer"></div>
</section>

<script src="modules/customer/scripts/customer_dispatch.js" charset="utf-8"></script>
